import { useState, memo } from 'react';
import { Line as AntLine } from '@ant-design/plots';
import { isEqual } from 'lodash';

const DemoLine = memo(
  ({ data, config, onReady }) => {
    const chartConfig = {
      data,
      xField: 'date',
      yField: 'value',
      seriesField: 'type',
      smooth: true,
      animation: {
        appear: {
          animation: 'path-in',
          duration: 1000,
        },
      },
      legend: {
        position: 'top-right',
      },
      tooltip: {
        showCrosshairs: true,
        shared: true,
      },
      ...config,
      onReady,
    };
    return <AntLine {...chartConfig} />;
  },
  (pre, next) => {
    return isEqual(pre?.data, next?.data) && isEqual(pre?.config, next?.config);
  },
);

const LineChart = ({ data = null, config = {}, onReady = () => {} }) => {
  // 默认模拟数据 - 访问趋势（7天）
  const defaultData = [
    { date: '周一', value: 120, type: '访问量' },
    { date: '周二', value: 182, type: '访问量' },
    { date: '周三', value: 191, type: '访问量' },
    { date: '周四', value: 234, type: '访问量' },
    { date: '周五', value: 290, type: '访问量' },
    { date: '周六', value: 330, type: '访问量' },
    { date: '周日', value: 310, type: '访问量' },
    { date: '周一', value: 90, type: '用户数' },
    { date: '周二', value: 130, type: '用户数' },
    { date: '周三', value: 150, type: '用户数' },
    { date: '周四', value: 180, type: '用户数' },
    { date: '周五', value: 200, type: '用户数' },
    { date: '周六', value: 230, type: '用户数' },
    { date: '周日', value: 210, type: '用户数' },
  ];

  return <DemoLine data={data || defaultData} config={config} onReady={onReady} />;
};

export default LineChart;